<template>
  <div class="w-full statistical-center">
    <statisticalHeader />
    <div class="px-40px pb-60px m--9px flex flex-1 gap-10px flex-col">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-12px text-28px fw-700">
          <div class="flex items-center">
            <el-date-picker
              popper-class="popper-date-class"
              v-model="queryDate"
              type="daterange"
              placeholder="请选择日期"
              value-format="YYYYMMDD"
              :clearable="false"
            />
          </div>
          <ClassStudentCascader @change="cascaderChange" />
        </div>
        <div>
          <aiGenerateReport :sendContent="sendContent" :roleId="54" />
        </div>
      </div>
      <div class="flex gap-20px flex-1 flex-wrap" v-loading="loading">
        <div class="echart-card flex flex-col justify-between w-909px">
          <Echart
            :width="getViewportPx(908)"
            :height="getViewportPx(725)"
            :options="pronunciationOption"
          />
        </div>
        <div class="echart-card flex flex-col justify-between w-909px">
          <Echart
            :width="getViewportPx(908)"
            :height="getViewportPx(725)"
            :options="spokenOption"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getViewportPx } from '@/utils/formatter'
import { statisticalCenterApi } from '@/api/school/statisticalCenter/index'
import { useLineOptions } from '@/hooks/chart/useLineOptions'
import statisticalHeader from './components/statisticalHeader.vue'
import aiGenerateReport from './components/aiGenerateReport.vue'
import { getDataZoomConfig } from './utils'
import { formatDate } from '@/utils/formatTime'

const pageData: any = ref({})
const loading = ref(true)
const cascaderParams: any = ref({})
const pathLabels = ref([])
const nowDateStr = formatDate(new Date(), 'YYYYMMDD')
const queryDate = ref([nowDateStr, nowDateStr])

const queryParams = computed(() => {
  return {
    startTime: queryDate.value[0],
    endTime: queryDate.value[1],
    ...cascaderParams.value
  }
})

// 发送内容
const sendContent = computed(() => {
  const baseData = {
    startTime: queryParams.value.startTime,
    endTime: queryParams.value.endTime,
    type: pathLabels.value.length - 1,
    target: pathLabels.value.join('-'),
    data: pageData.value
  }
  return baseData
})
// 请求接口
const requestApiMap = computed(() => {
  let baseApi = statisticalCenterApi.getSchoolSpeechSpokenReport
  if (queryParams.value.studentId) {
    baseApi = statisticalCenterApi.getSpeechSpokenReport
  } else if (queryParams.value.classId) {
    baseApi = statisticalCenterApi.getClassSpeechSpokenReport
  }
  return {
    baseApi
  }
})

const init = async () => {
  if (!Object.keys(cascaderParams.value).length) {
    return
  }
  try {
    loading.value = true
    pageData.value = await requestApiMap.value.baseApi(queryParams.value)
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
const cascaderChange = async (params, cascaderPathLabels) => {
  cascaderParams.value = params
  pathLabels.value = cascaderPathLabels
}

const pronunciationOption = computed(() => {
  return useLineOptions([], {
    title: {
      text: '语音能力分析',
      left: 'center'
    },
    grid: {
      top: getViewportPx(100, true)
    },
    dataZoom: [getDataZoomConfig()],
    xAxis: {
      data: pageData.value?.map?.((item) => item.date || item.className || item.studentName)
    },
    series: [
      {
        name: '语料数量',
        smooth: true,
        data: pageData.value?.map?.((item) => item.audioCount || 0)
      },
      {
        name: '声韵得分',
        smooth: true,
        data: pageData.value?.map?.((item) => item.pronunciation || item.pronunciationAvg || 0)
      },
      {
        name: '音调得分',
        smooth: true,
        data: pageData.value?.map?.((item) => item.tone || item.toneAvg || 0)
      }
    ]
  }).baseOptions
})
const spokenOption = computed(() => {
  return useLineOptions([], {
    title: {
      text: '口语能力分析',
      left: 'center'
    },
    grid: {
      top: getViewportPx(100, true)
    },
    dataZoom: [getDataZoomConfig()],
    xAxis: {
      data: pageData.value?.map?.((item) => item.date || item.className || item.studentName)
    },
    series: [
      {
        name: '语料数量',
        smooth: true,
        data: pageData.value?.map?.((item) => item.audioCount || 0)
      },
      {
        name: '语速',
        smooth: true,
        data: pageData.value?.map?.((item) => item.speed || item.speedAvg || 0)
      },
      {
        name: '流畅度',
        smooth: true,
        data: pageData.value?.map?.((item) => item.fluency || item.fluencyAvg || 0)
      },
      {
        name: '整体印象',
        smooth: true,
        data: pageData.value?.map?.((item) => item.overall || item.overallAvg || 0)
      }
    ]
  }).baseOptions
})
watch(
  () => queryParams.value,
  () => {
    init()
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
@import url('./index.scss');

.echart-card {
  padding: 15px 0;
}
</style>
